<style lang="scss" scoped>
.content {
  padding-top: 60px;
  position: fixed;
  width: 100%;
  height: 100%;
  .scoll {
    height: calc(100% - 180px);
    overflow: auto;
  }
  .navbar {
    width: 100%;
    height: 40px;
    font-size: 14px;
    background-color: #fff;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    padding-left: 20px;
    .left {
      width: 390px;
      height: 40px;
      float: left;
      padding-right: 10px;
      border-right: 1px solid #dadada;
      padding-left: 4px;
      .nav {
        height: 30px;
        margin: 0 auto;
        margin-top: 4px;
        border-radius: 15px;
        background-color: #f0efef;
        .z,
        .g {
          display: inline-block;
          width: 48.9%;
          height: 25px;
          margin-top: 2px;
          line-height: 25px;
          text-align: center;
          border-radius: 17.5px;
          color: #a1a1a1;
          cursor: pointer;
        }
        // .g {
        //   width: 130px;
        // }
        .active {
          color: #fff;
          margin: 0 4px;
          background-color: #4591ff;
        }
        .theKeyActive {
          color: #fff;
          margin: 0 4px;
          background-color: #5ABD0A;
        }
      }
    }
    .submit {
      float: right;
      font-size: 14px;
      height: 40px;
      line-height: 36px;
      margin-right: 2%;
      .t {
        display: inline-block;
        position: relative;
        right: 30px;
        top: 8px;
        width: 58px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 12px;
        background-color: #4591ff;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .center {
    max-width: 1366px;
    margin: 0 auto;
  }
  .section {
    max-width: 1366px;
    margin: 0 auto;
    height: calc( 100% - 163px);
    font-size: 12px;
    padding-top: 15px;
    .left {
      width: 408px;
      height: 100%;
      overflow: auto;
      // background: red;
      float: left;
      margin-left: 20px;
      position: relative;
    }
    .right {
      margin-right: 20px;
      height: 100%;
    }
  }
  .detailed{
    position: fixed;
    right: 0;
    bottom: 10%;
    img{
      width: 76px;
      cursor: pointer;
    }
  }
}
.myimport {
  .el-dialog {
    width: 736px !important;
    height: 360px;
    .el-dialog__header {
      height: 45px;
      padding: 15px 15px 0 30px;
      .el-dialog__title {
        position: relative;
        font-size: 14px;
        font-weight: 600;
        line-height: 7px;
        &::before {
          content: "";
          position: absolute;
          top: 1px;
          left: -10px;
          display: block;
          width: 3px;
          height: 14px;
          background-color: #4b92f7;
        }
      }
      .el-dialog__headerbtn {
        top: 12px;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
    .main {
      width: 694px;
      margin: 0 auto;
      border-top: 1px solid #d4d4d4;
      padding-top: 22px;
      .steps {
        width: 665px;
        height: 45px;
        margin: 0 auto;
        // background: rgb(233, 203, 203);
        .one {
          float: left;
          width: 255px;
          .yuan {
            float: left;
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #999;
          }
          .yuanActive{
            border: 1px solid #448EF7;
            background: #448EF7;
            color: #fff;
          }
          .title {
            position: relative;
            float: left;
            margin: 0 16px 0 11px;
            font-size: 13px;
            line-height: 30px;
            .info {
              float: left;
              position: absolute;
              top: 22px;
              left: 0;
              width: 150px;
              font-size: 12px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: rgb(170, 169, 169);
            }
          }
          .xian {
            float: left;
            width: 135px;
            height: 2.5px;
            background-color: #999;
            margin-top: 14px;
          }
          .xianActive{
            background-color: #448EF7;
          }
        }
        .last {
          float: left;
          width: 150px;
        }
      }
      .displayshow {
        width: 100%;
        height: 156px;
        margin-top: 26px;
        // margin: 26px 0;
        overflow: hidden;
        .two{
          float: left;
          margin-left: 32%;
          margin-right: 8%;
        }
        .displayshowimg{
          width: 100%;
          text-align: center;
          margin-top: 10px;
          img{
            width: 60px;
          }
          .importimg{
            width: 120px;
          }
        }
        .displayshowbtn{
          text-align: center;
          margin-top: 10px;
          .sucessContent{
            width: 80%;
            display: block;
            background: #F8F8F8;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding: 0 2%;
            span{
              float: right;
              cursor: pointer;
              width: 20px;
              text-align: center;
            }
          }
        }
        .importend{
          color: #448EF7;
        }
      }
      .uploadError {
        overflow: auto;
        border: 1px solid #eee;
        padding: 7px;
        p{
          color: red;
        }
        ul{
          padding-left: 3%;
          line-height: 20px;
          color: red;
        }
      }
      .tipsTitle{
        width: 100%;
        text-align: left;
        color: #CF352E;
        height: 30px;
        font-family: PingFang SC;
      }
      .footer {
        width: 100%;
        text-align: right;
      }
    }
  }
}
::v-deep{
  .el-upload-list{
    display: none;
  }
}
.systemPromptContent{
  font-size: 16px;
  color: red;
  line-height: 30px;
}
.submitTip{
  max-height: 200px;
  overflow: auto;
}
</style>
<template>
  <div class="content">
    <bxHeader @date="date" />
    <bxTitle />
    <bxTab />
    <div class="scoll">
      <titleInfo ref="titleInfo" :date="year" :tab-content="tabContent" />
      <div class="navbar">
        <div class="center">
          <div class="left">
            <div class="nav">
              <span class="z" :class="importantActive === true ? 'active' : ''" @click="theKeyClick('0')">重要任务</span>
              <span class="g" :class="importantActive === false ? 'theKeyActive' : ''" @click="theKeyClick('1')">关键指标</span>
            </div>
          </div>
          <div class="submit">
            <el-button :disabled="loading" type="primary" round @click="modiPwd">导入</el-button>
            <el-button
              :disabled="loading"
              type="warning"
              round
              style="background: #FE7F39;border:none"
              @click="saveChange()"
            >保存变更</el-button>
            <el-button :disabled="loading" type="primary" round @click="submitClick()">提交</el-button>
            <!-- <span class="t" @click="modiPwd">保存变更</span>
            <span class="t" @click="modiPwd">提交</span> -->
          </div>
        </div>
      </div>
      <div ref="pinglun" class="section">
        <div v-loading="loading" class="left">
          <bxAsside ref="left" :important-active="importantActive" :mission-list.sync="missionList" :index-list.sync="indexList" @drag="toDrag" @dragGuanjian="gjDrag" @assideMissionList="assideMissionList" @childObj="childObj" />
        </div>
        <div ref="toTop" class="right">
          <bxRight ref="right" v-loading="loading" :mainactive="!importantActive" :edit="edit" :mission-list="missionList" :child-obj="childObjList" :tab-content="tabContent" :date="year" :is-save="isSave" @saveYes="saveYes" />
        </div>
      </div>
    </div>
    <bxFooter />
    <!-- 弹窗 -->
    <el-dialog
      class="myimport"
      title="导入"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
      append-to-body
      style="font-size: 12px !important"
      top="25vh"
    >
      <!-- 下载 -->
      <div v-show="mainActive === '1'" class="main">
        <div class="steps">
          <span class="one">
            <i class="yuan yuanActive">1</i>
            <i class="title">
              下载模板
              <i class="info">下载Excel格式模板,本导入</i>
            </i>
            <i class="xian xianActive" />
          </span>
          <span class="one">
            <i class="yuan">2</i>
            <i class="title">
              上传表格
              <i class="info">填写完成Excel表格,上传</i>
            </i>
            <i class="xian" />
          </span>
          <span class="one last">
            <i class="yuan">3</i>
            <i class="title">
              写入数据
              <i class="info">验证格式并写入数据</i>
            </i>
          </span>
        </div>
        <div class="displayshow">
          <div class="two">
            <div class="displayshowimg">
              <img src="../../assets/img/microsoftexcel.png" alt="">
            </div>
            <div class="displayshowbtn">
              <el-button round @click="downloadClick('kong')">下载空模板</el-button>
            </div>
          </div>
          <div style="float:left">
            <div class="displayshowimg">
              <img src="../../assets/img/microsoftexcel.png" alt="">
            </div>
            <div class="displayshowbtn">
              <el-button round @click="downloadClick('yang')">下载样例</el-button>
            </div>
          </div>
        </div>
        <div class="tipsTitle">
          备注：请严格按照模板填写表格
        </div>
        <div class="footer">
          <el-button size="medium" type="primary" round @click="nextStep('2')">下一步</el-button>
        </div>
      </div>
      <!-- 上传 -->
      <div v-show="mainActive === '2'" class="main">
        <div class="steps">
          <span class="one">
            <i class="yuan yuanActive">1</i>
            <i class="title">
              下载模板
              <i class="info">下载Excel格式模板,本导入</i>
            </i>
            <i class="xian xianActive" />
          </span>
          <span class="one">
            <i class="yuan yuanActive">2</i>
            <i class="title">
              上传表格
              <i class="info">填写完成Excel表格,上传</i>
            </i>
            <i class="xian" />
          </span>
          <span class="one last">
            <i class="yuan">3</i>
            <i class="title">
              写入数据
              <i class="info">验证格式并写入数据</i>
            </i>
          </span>
        </div>
        <div class="displayshow">
          <div class="displayshowimg">
            <img v-show="isSucess" src="../../assets/img/m1icrosoftexcel.png" alt="">
            <img v-show="!isSucess" src="../../assets/img/sucess.png" alt="">
          </div>

          <div class="displayshowbtn">
            <el-upload
              v-show="isSucess"
              ref="upload"
              class="upload-demo"
              :action="action"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="addClick"
              :on-error="errorClick"
              :on-change="uploadChange"
              :before-remove="beforeRemove"
              accept=".xls, .xlsx"
              :limit="1"
              :auto-upload="false"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button round>点击上传</el-button>
            </el-upload>
            <!-- <el-button v-show="isSucess" round @click="addClick()">上传模板</el-button> -->
            <span v-show="!isSucess" class="sucessContent">{{ tabContent.orgName + '-' + tabContent.empName + '-' + newDate + '  上传文件选择成功' }}<span @click="removeClick()">x</span></span>
          </div>
        </div>
        <div class="tipsTitle">
          <!-- 备注：请严格按照模板填写表格 -->
        </div>
        <div class="footer">
          <el-button size="medium" round @click="nextStep('1')">上一步</el-button>
          <el-button size="medium" type="primary" round :disabled="isSucess" @click="nextStep('3')">导入</el-button>
        </div>
      </div>
      <!-- 导入完成 -->
      <div v-show="mainActive === '3'" class="main">
        <div class="steps">
          <span class="one">
            <i class="yuan yuanActive">1</i>
            <i class="title">
              下载模板
              <i class="info">下载Excel格式模板,本导入</i>
            </i>
            <i class="xian xianActive" />
          </span>
          <span class="one">
            <i class="yuan yuanActive">2</i>
            <i class="title">
              上传表格
              <i class="info">填写完成Excel表格,上传</i>
            </i>
            <i class="xian xianActive" />
          </span>
          <span class="one last">
            <i class="yuan yuanActive">3</i>
            <i class="title">
              写入数据
              <i class="info">验证格式并写入数据</i>
            </i>
          </span>
        </div>
        <div v-show="!isUpload" class="displayshow">
          <div class="displayshowimg">
            <img class="importimg" src="../../assets/img/complete.png" alt="">
          </div>

          <div class="displayshowbtn importend">
            导入完成
          </div>
        </div>
        <div v-show="isUpload" class="displayshow uploadError" style="overflow:auto">
          <div class="displayshowbtn importend">
            导入失败
          </div>
          <p>重要任务：</p>
          <ul>
            <li v-for="(item,index) in uploadErrorList.missionErrorList" v-show="uploadErrorList.missionErrorList.length !== 0" :key="index">{{ item }}</li>
            <li v-show="uploadErrorList.missionErrorList.length === 0">暂无</li>
          </ul>
          <p>关键指标：</p>
          <ul>
            <li v-for="(item,index) in uploadErrorList.indexErrorList" v-show="uploadErrorList.indexErrorList.length !== 0" :key="index">{{ item }}</li>
            <li v-show="uploadErrorList.indexErrorList.length === 0">暂无</li>
          </ul>
        </div>
        <div class="tipsTitle">
          <!-- 备注：请严格按照模板填写表格 -->
        </div>
        <div class="footer">
          <el-button size="medium" round @click="nextStep('2')">上一步</el-button>
          <el-button size="medium" type="primary" round @click="importsucess()">完成</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <div class="detailed">
      <img src="../../assets/img/jane.png" alt="" @click="gotoPage()">
    </div> -->
    <sortTool ref="sort" @mainDeleteClick="mainDeleteClick" @mainAddClick="mainAddClick" @mainSortClick="mainSortClick" />
    <el-dialog
      class="myimport"
      width="55%"
      append-to-body
      style="font-size: 12px !important"
      top="25vh"
      title="系统提示"
      :visible.sync="dialogRecord"
    >
      <div class="submitTip">
        <div v-for="(item,index) in systemPromptList" :key="index" class="systemPromptContent">{{ item }}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bxHeader from '@/components/headerFooter/header'
import bxTab from '@/components/tab/index'
import bxTitle from '@/components/tab/title'
import titleInfo from '@/components/tab/titleInfo'
import bxAsside from '@/components/tab/asside.vue'
import sortTool from '@/components/tab/sortTool.vue'
import bxFooter from '@/components/headerFooter/footer'
import bxRight from '@/views/dashboard/checkPrint.vue'
// import changeRecord from '@/views/dashboard/changeRecord/changeRecord.vue'
export default {
  components: {
    bxFooter,
    bxHeader,
    // changeRecord,
    bxTab,
    bxTitle,
    titleInfo,
    bxRight,
    bxAsside,
    sortTool
  },
  data() {
    return {
      fileList: [],
      input: '',
      dialogVisible: false,
      dialogRecord: false,
      loading: false,
      systemPromptList: [],
      previousBtn: false,
      isUpload: false,
      mainActive: '1',
      isSucess: true,
      sucesskey: 0,
      importantActive: true,
      year: '',
      edit: '',
      missionList: [],
      indexList: [],
      tabContent: {},
      childObjList: {},
      isSave: '',
      saveContent: {},
      uploadErrorList: {
        missionErrorList: [],
        indexErrorList: []
      },
      newDate: '',
      action: '',
      submitId: ''
    }
  },
  mounted() {
    this.action = '/opm/api/serviceAction/common?serviceName=MT01101&methodName=uploadExcel&reportYear=' + this.year
    if (this.$route.query.edit) {
      this.edit = this.$route.query.edit
    }
  },
  methods: {
    toDrag(val1, val2) {
      const linshi = JSON.parse(JSON.stringify(this.missionList[val1]))
      // const linshi = this.missionList[val1]
      this.missionList.splice(val1, 1)
      if (val1 < val2) {
        this.missionList.splice(val2, 0, linshi)
      } else {
        this.missionList.splice(val2, 0, linshi)
      }
      // for(var i in this.missionList){
      //   this.missionList[i]['idx'] = i - 0 + 1
      // }
      console.log(this.missionList, linshi.detailIdentify, val1, val2, '外面')
    },
    gjDrag(val1, val2) {
      // const linshi = JSON.parse(JSON.stringify(this.indexList[val1]))
      const linshi = (this.indexList[val1])
      this.indexList.splice(val1, 1)
      if (val1 < val2) {
        this.indexList.splice(val2 - 1, 0, linshi)
      } else {
        this.indexList.splice(val2, 0, linshi)
      }
      console.log(this.indexList, '外面guanjian')
    },
    // 滚动条
    scrollTopTimer() {
      this.$refs['pinglun'].scrollIntoView(true)
      this.$refs['toTop'].children[0].scrollTop = 0
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.info(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    removeClick() {
      this.$refs.upload.beforeRemove()
    },
    beforeRemove(file, fileList) {
      console.log(file, fileList)
      this.$confirm(`确定移除？`).then(() => {
        this.$message({
          type: 'success',
          message: '移除成功!'
        })
        this.fileList = []
        this.isSucess = true
      }).catch(() => {

      })
    },

    downloadClick(val) {
      if (val === 'kong') {
        window.location.href = '/opm/FS/FS00001.jsp?serviceName=MT01101&methodName=downloadTemplate'
      }
      if (val === 'yang') {
        window.location.href = '/opm/FS/FS00001.jsp?serviceName=MT01101&methodName=writeTemplate'
      }
    },
    // 年份
    date(val) {
      this.year = val
      this.init(val)
    },

    getPrintData() {
      return this.$refs.right.getSelfData()
    },

    init(val) {
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01101',
        'methodName': 'getReportHistoryWeb',
        'reportYear': val || this.year
      }).then((res) => {
        if (res.isSuccess) {
          this.loading = false
          this.tabContent = res.data
          this.missionList = res.data.missionList
          this.indexList = res.data.indexList
          this.saveContent = res.data
          if (this.missionList.length === 0) {
            this.missionList.push(this.getEmptyMissionObj())
          }
          if (this.indexList.length === 0) {
            this.indexList.push(this.getEmptyIndexObj())
          }
        }
      })
    },

    getEmptyMissionObj() {
      return {
        detailIdentify: (this.missionList.length + 1) + '',
        add: true,
        name: '',
        dimension: '',
        content: '',
        finishTime: '',
        weight: '',
        originalSelect: '',
        originalInput: '',
        list: []
      }
    },

    getEmptyIndexObj() {
      return {
        detailIdentify: (this.indexList.length + 1) + '',
        add: true,
        name: '',
        dimension: '',
        content: '',
        finishTime: '',
        weight: '',
        originalSelect: '',
        originalInput: '',
        list: []
      }
    },

    // 提交
    modiPwd() {
      this.mainActive = '1'
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.fileList = []
          done()
        })
        .catch((_) => {})
    },
    // 下一步/上一步
    nextStep(val) {
      if (this.mainActive === '1') {
        this.isSucess = true
      }
      if (val === '3') {
        console.log('44444')
        // debugger
        // this.isSucess = true
        this.$refs.upload.submit()
      } else {
        // this.mainActive = val
      }
      this.mainActive = val
    },
    // 上传模版 上传成功
    addClick(res) {
      console.log(res)
      if (res.isSuccess) {
        this.init()
      } else {
        this.isUpload = true
        this.uploadErrorList.missionErrorList = res.data.missionErrorList
        this.uploadErrorList.indexErrorList = res.data.indexErrorList
      }
    },
    // 上传失败
    errorClick(val) {
      console.log(val)
    },
    uploadChange(val, list) {
      console.log(val, list)
      this.newDate = new Date().getFullYear() + '' + new Date().getHours() + '' + new Date().getMinutes()
      this.isSucess = false
    },
    // 完成
    importsucess() {
      // this.$refs.upload.beforeRemove()
      this.fileList = []
      this.isSucess = true
      this.dialogVisible = false
    },
    gotoPage() {
      this.$router.push({
        path: '/checkSubordinatesview'
      })
    },
    // 关键指标/重要任务
    theKeyClick(val) {
      if (val === '1') {
        this.importantActive = false
      } else {
        this.importantActive = true
      }
    },
    childObj(val) {
      this.childObjList = val
    },
    assideMissionList(val) {
      this.missionList = val
    },
    mainDeleteClick(val) {
      console.log(val)
      // this.$nextTick(() => {
      this.$refs.left.delete()
      // })
    },
    mainAddClick(val) {
      this.$refs.left.addMain()
    },
    mainSortClick(val) {
      // debugger
      if (val === 'down') {
        this.$refs.left.down()
      }
      if (val === 'up') {
        this.$refs.left.up()
      }
      if (val === 'import') {
        this.$refs.sort.sortShou(false)
        this.modiPwd()
      }
    },

    assideIndexList(val) {
      this.indexList = val
    },

    saveYes(val) {
      if (val) {
        this.init()
      }
    },
    // 保存变更
    saveChange(callBack, is) {
      this.loading = true
      const missionList = this.$refs.left.getMissionList()
      const indexList = this.$refs.left.getIndexList()
      this.saveContent.missionList = missionList
      this.saveContent.indexList = indexList
      this.saveContent.reportYear = this.year
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01101',
        'methodName': 'saveWebReportHistory',
        ...this.saveContent
      }).then((res) => {
        if (res.isSuccess) {
          this.submitId = res.data
          this.init()
          callBack && callBack()
          if (!is) {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }
        }
      })
    },
    submitClick() {
      console.log('tijiao')
      const missionList = this.$refs.left.getMissionList()
      const indexList = this.$refs.left.getIndexList()
      console.log(missionList, indexList)
      console.log(this.saveContent)
      this.$http.post('/serviceAction/common', {
        'reportId': this.saveContent.reportId,
        'reportHistoryId': this.saveContent.reportHistoryId,
        'reportYear': this.year,
        'missionList': missionList,
        'indexList': indexList,
        'serviceName': 'MT01101',
        'methodName': 'checkReportHistory'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          console.log(res)
          this.$confirm(res.data[0], '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.submitAxios()
          }).catch(() => {

          })
        } else {
          this.dialogRecord = true
          this.systemPromptList = res.data
        }
      })
    },
    submitAxios() {
      this.saveChange(() => {
        this.$http.post('/serviceAction/common', {
          'serviceName': 'MT01101',
          'methodName': 'submitWrite',
          'reportHistoryId': this.submitId
        }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.$refs.titleInfo.init()
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.$router.push({
              path: '/viewIndex',
              query: {
                showBtn: '1'
              }
            })
          } else {
            this.$message({
              type: 'info',
              message: '提交失败'
            })
          }
        })
      }, true)
    }

  }
}
</script>
